<template>
 <div class="Turnover">
  <div class="box">
   <h6>Cumulative Turnover</h6>

   <el-row :gutter="12" class="iconTable">
    <el-col v-for="(item, index) of list" :key="index" :span="7">
     <el-card shadow="always">
      <h6>{{ item.name }}</h6>

      <p>{{ item.amount }}</p>
     </el-card>
    </el-col>
   </el-row>
  </div>
 </div>
</template>

<script>
export default {
 name: "Turnover",
 data: () => ({
  list: [
   {
    name: 'Cumulative transaction',
    amount: '3102619.18'
   },
   {
    name: 'Cumulative mining transaction',
    amount: '1790821.98'
   },
   {
    name: 'Cumulative transaction of custody',
    amount: '5182018.21'
   }
  ]
 }),
 created() {
  this.onChange()
 },
 methods: {
  // 切换语言
  onChange () {
   const lang = [this.$t('home.turnover.list1'), this.$t('home.turnover.list2'), this.$t('home.turnover.list3')];
   this.list.forEach((item, index) => {
    item.name = lang[index];
   })
  }
 },
 watch:{
  '$i18n.locale' (a,b){
   this.onChange()
  }
 }
}
</script>

<style scoped lang="scss">
.Turnover {
 width: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 100px 0;
 flex-direction: column;

 .box {
  max-width: 935px;
  width: 95%;
  display: flex;
  flex-direction: column;

  >h6 {
   font-size: 35px;
   text-align: center;
   color: #002445;
   margin: 0 auto 60px;
   border-bottom: 3px solid #0d4fa5;
   padding: 0 40px 10px;
  }

  .iconTable {
   display: flex;
   flex-wrap: wrap;

   .el-col {
    &:nth-of-type(2) {
     margin: auto;
    }

    .el-card {
     border: none;
     padding: 24px;

     /deep/ .el-card__body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0;
      text-align: left;

      h6 {
       font-size: 16px;
       color: #b3bdc7;
       font-weight: 600;
       width: 100%;
      }

      p {
       width: 100%;
       font-size: 28px;
       color: #002445;
       margin-top: 8px;
       font-weight: bold;
      }
     }
    }
   }
  }
 }
}
</style>
